<template>
  <div class="like">
    <img class="you_like" src="@/assets/like.webp" alt="" />
    <div class="item_wrapper">
      <div class="items" v-for="item in items" :key="item.id" @click="clickItem(item.id)">
        <div class="img_wrapper">
          <img v-lazy="item.pic" alt="" />
        </div>
        <div class="item_name">
          {{item.name}}
        </div>
        <div class="sm_logo">
          <img src="@/assets/self.png" class="sn_self" alt="" />
          <span class="sn_discount">大聚惠</span>
        </div>
        <div class="price">
          <span class="flag">￥</span>
          <span class="pre_price">{{item.originalPrice}}</span>
          <span class="last_price">.9</span>
          <span class="price_comment">{{item.views}}万+评价</span>
          <van-icon @click.stop="addCart(item.id)" name="cart-o" color="#1989fa" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Item',
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  // 子传父
  methods: {
    // 首页点击加入购物车
    addCart (id) {
      this.$emit('emitAddCart', id)
    },
    clickItem (id) {
      this.$emit('receiveItem', id)
    }
  }
}
</script>

<style lang="scss" scoped>
.price {
  position: relative;
}
.price .van-icon-cart-o{
  position: absolute;
  right: .026667rem;
}
.like {
  margin-top: 30px;
}
.you_like {
  width: 100%;
}
.item_wrapper {
  background-color: #f7f7f7;
  padding: 0 0.333333rem 0 0.333333rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  // display: flex;
  // justify-content:space-between;
  .items {
    width: 4.56rem;
    height: 7.226667rem;
    margin-bottom: 10px;
    background-color: #fff;
    display: inline-block;
    border-radius: 20px;
  }
}
.items {
  .img_wrapper {
    width: 4.56rem;
    height: 4.56rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .item_name {
    font-size: 0.346667rem;
    margin: 0.24rem 0.16rem 0;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
.sm_logo {
  display: flex;
  align-items: center;
  width: 3.586667rem;
  height: 0.32rem;
  margin: 0.146667rem 0.16rem 0.32rem;
  .sn_self {
    width: 0.64rem;
    height: 0.32rem;
    margin: 0 0.08rem 0.026667rem 0;
  }
  .sn_discount {
    padding: 0.026667rem 0.16rem;
    margin: 0 0.04rem 0.026667rem 0.026667rem;
    height: 0.32rem;
    background-color: #ffbb00;
    font-size: 0.24rem;
    border-radius: 0.133333rem;
    color: #333;
    line-height: 0.3rem;
  }
}
.price {
  display: flex;
  height: 0.506667rem;
  margin-left: 0.16rem;
  line-height: 0.506667rem;
  font-size: 0.48rem;
  color: #ff4422;
  font-weight: bold;
  align-items: flex-end;
  .flag{
    font-size: .32rem;
    line-height: .4rem;
  }
  .last_price{
    font-size: .32rem;
    line-height:.4rem;
  }
  &_comment{
    color: #999999;
    margin-left:.16rem;
    font-weight: normal;
    font-size: .266667rem
  }
}
</style>
